import React, { Component } from 'react';
import { Card, Button, Table, Popconfirm, message } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { query, update, deleteAuth } from '@/services/auth';
class AuthPage extends Component {

    constructor ( props ) {
        super( props );
        this.state = {
            authLists: []
        };
    }

    componentDidMount () {
        this.initialData();
    }

    initialData = async () => {
        const res = await query();
        this.setState( {
            authLists: res.data.list
        } );
    };

    onhandleStatusChange = async ( type, record ) => {
        const payload = {
            status: type,
            openid: record.openid
        };
        const res = await update( payload );
        if ( res.code == 0 )
        {
            message.success( '操作成功' );
            this.initialData();
        }
    };

    onhandleDelete = async ( record ) => {
        const payload = {
            openid: record.openid
        };
        const res = await deleteAuth( payload );
        if ( res.code == 0 )
        {
            message.success( '操作成功' );
            this.initialData();
        }
    };

    render () {
        const { authLists } = this.state;
        const columns = [
            {
                title: "openID",
                dataIndex: "openid",
                key: "openid"
            },
            {
                title: "角色",
                dataIndex: "role",
                key: "role"
            },
            {
                title: "状态",
                dataIndex: "status",
                key: "status",

            },
            {
                title: "操作",
                key: "action",
                align: "center",
                render: ( text, record ) => {
                    return (
                        <div>
                            <Popconfirm title="是否通过" onConfirm={ () => this.onhandleStatusChange( '通过', record ) }>
                                <Button type="link" >通过</Button>
                            </Popconfirm>
                            <Popconfirm title="是否拒绝" onConfirm={ () => this.onhandleStatusChange( '拒绝', record ) }>
                                <Button type="link" >拒绝</Button>
                            </Popconfirm>
                            <Popconfirm title="是否删除" onConfirm={ () => this.onhandleDelete( record ) }>
                                <Button type="link" style={ { color: "red" } }>删除</Button>
                            </Popconfirm>
                        </div>

                    );
                }
            }
        ];
        return (
            <PageHeaderWrapper>
                <Card>
                    <Table dataSource={ authLists } columns={ columns }></Table>
                </Card>

            </PageHeaderWrapper>

        );
    }
}

export default AuthPage;